<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>销售分析图表</title>
  <th:block th:include="include :: header('销售分析图表')" />
  <style>
    .chart-container {
        width: 100%;
        height: 400px;
        margin-bottom: 30px;
        border: 1px solid #e7eaec;
        border-radius: 4px;
        padding: 15px;
        background: #fff;
    }
    .chart-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
    }
  </style>
</head>
<body class="gray-bg">
<div class="container-div">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>销售数据分析</h5>
          <div class="ibox-tools">
            <a class="btn btn-primary btn-xs" th:href="@{/sale/item}">
              <i class="fa fa-arrow-left"></i> 返回列表
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <!-- 热销产品柱状图 -->
          <div class="chart-container">
            <div class="chart-title">热销产品TOP10</div>
            <div id="barChart" style="width: 100%; height: 350px;"></div>
          </div>

          <!-- 销售趋势折线图 -->
          <div class="chart-container">
            <div class="chart-title">销售趋势分析</div>
            <div id="lineChart" style="width: 100%; height: 350px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<th:block th:include="include :: footer" />

<script th:inline="javascript">
  $(function() {
      // 初始化柱状图
      initBarChart();

      // 初始化折线图
      initLineChart();
  });

  // 热销产品柱状图
  function initBarChart() {
      var barChart = echarts.init(document.getElementById('barChart'));

      // 模拟数据 - 实际项目中应从后端获取
      var productNames = ['商品A', '商品B', '商品C', '商品D', '商品E', '商品F', '商品G', '商品H', '商品I', '商品J'];
      var salesAmounts = [12000, 9800, 8500, 7600, 6800, 5900, 5200, 4800, 4200, 3800];
      var salesQuantities = [120, 98, 85, 76, 68, 59, 52, 48, 42, 38];

      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              data: ['销售额', '销售数量']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              data: productNames,
              axisLabel: {
                  interval: 0,
                  rotate: 30 // 如果名称太长可以旋转30度
              }
          },
          yAxis: [
              {
                  type: 'value',
                  name: '销售额(元)',
                  axisLabel: {
                      formatter: '{value}'
                  }
              },
              {
                  type: 'value',
                  name: '销售数量',
                  axisLabel: {
                      formatter: '{value}'
                  }
              }
          ],
          series: [
              {
                  name: '销售额',
                  type: 'bar',
                  data: salesAmounts,
                  itemStyle: {
                      color: '#1ab394'
                  },
                  label: {
                      show: true,
                      position: 'top'
                  }
              },
              {
                  name: '销售数量',
                  type: 'bar',
                  yAxisIndex: 1,
                  data: salesQuantities,
                  itemStyle: {
                      color: '#23c6c8'
                  },
                  label: {
                      show: true,
                      position: 'top'
                  }
              }
          ]
      };

      barChart.setOption(option);

      // 响应式调整
      window.addEventListener('resize', function() {
          barChart.resize();
      });
  }

  // 销售趋势折线图
  function initLineChart() {
      var lineChart = echarts.init(document.getElementById('lineChart'));

      // 模拟数据 - 实际项目中应从后端获取
      var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      var salesTrend = [4200, 5800, 7200, 8500, 9200, 10800, 12500, 13800, 14600, 15800, 16900, 18200];
      var growthRate = [0, 38, 24, 18, 8, 17, 16, 10, 6, 8, 7, 8];

      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
              data: ['销售额', '增长率']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: months
          },
          yAxis: [
              {
                  type: 'value',
                  name: '销售额(元)',
                  axisLabel: {
                      formatter: '{value}'
                  }
              },
              {
                  type: 'value',
                  name: '增长率(%)',
                  min: 0,
                  max: 40,
                  interval: 5,
                  axisLabel: {
                      formatter: '{value}%'
                  }
              }
          ],
          series: [
              {
                  name: '销售额',
                  type: 'line',
                  smooth: true,
                  data: salesTrend,
                  itemStyle: {
                      color: '#1c84c6'
                  },
                  areaStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                              offset: 0,
                              color: 'rgba(28, 132, 198, 0.5)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(28, 132, 198, 0.1)'
                          }
                      ])
                  },
                  label: {
                      show: true,
                      position: 'top'
                  }
              },
              {
                  name: '增长率',
                  type: 'line',
                  yAxisIndex: 1,
                  smooth: true,
                  data: growthRate,
                  itemStyle: {
                      color: '#f8ac59'
                  },
                  label: {
                      show: true,
                      position: 'top',
                      formatter: '{c}%'
                  }
              }
          ]
      };

      lineChart.setOption(option);

      // 响应式调整
      window.addEventListener('resize', function() {
          lineChart.resize();
      });
  }
</script>
</body>
</html>